<template>
  <div class="base">
    <a-layout id="components-layout-demo-custom-trigger">
<!--      菜单-->
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible style="min-height: 700px;">
        <!--logo-->
        <div class="logo" style="text-align: center;font-size: 20px;color:#fff;">
          Hippo
        </div>
      <!--  菜单主体  -->
        <!--  a-menu :default-selected-keys="['1']" 默认导航页面-->
        <!--  a-menu 加冒号 :inline-collapsed绑定数据，false隐藏-->
      <a-menu
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          mode="inline"
          theme="dark"
          :inline-collapsed="collapsed"
          @select="selectedHandler"
        >
        <!-- for 循环menu_list数组的数据，展示导航的内容-->
        <template v-for="(menu, index) in menu_list">

            <!--  key表示选中 v-if判断1，2级菜单（根据list数据是否有children数据） -->
            <!--  一级菜单 -->
            <a-menu-item v-if="menu.children.length===0" :key="menu.id">
              <!-- router-link 跳转路由，底层原理是翻译成a标签 -->
              <router-link :to="menu.menu_url">
                <a-icon type="mail"/>
                {{menu.title}}
              </router-link>
            </a-menu-item>

            <!--  二级菜单 -->
            <!--  v-else 有子集级菜单 -->
            <a-sub-menu v-else :key="menu.id">
              <span slot="title">
                <a-icon :type="menu.icon"/>
                <span>{{menu.title}}</span>
              </span>


              <a-menu-item v-for="(child_menu, child_index) in menu.children" :key="child_menu.id">
                <router-link :to="child_menu.menu_url">{{child_menu.title}}</router-link>
              </a-menu-item>

            </a-sub-menu>

          </template>
      </a-menu>
    </a-layout-sider>

      <a-layout>
<!--        头部-->
        <a-layout-header>
          <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
            <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"/>
          </a-button>
        </a-layout-header>
<!--        主体-->
        <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
        >
<!--          子路由，嵌套路由出口-->
          <router-view></router-view>
        </a-layout-content>
<!--        脚-->
        <a-layout-footer style="text-align: center">Footer</a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: "Base",
  data() {
    return {
      collapsed: false,
      menu_list: [
        {id: 1, icon: 'mail', title: '展示中心', tube: '', 'menu_url': '/hippo/showcenter/', children: []},
        {
          id: 2, icon: 'mail', title: '资产管理', 'menu_url': '/hippo/host/', children: []
        },
        {
          id: 3, icon: 'bold', title: '批量任务', tube: '', 'menu_url': '/hippo/workbench', children: [
            {id: 10, icon: 'mail', title: '执行任务', 'menu_url': '/hippo/multi_exec/'},
            {id: 11, icon: 'mail', title: '命令管理', 'menu_url': '/hippo/multi_exec/'},
          ]
        },
        {

          id: 4, icon: 'highlight', title: '代码发布', tube: '', 'menu_url': '/hippo/workbench', children: [
            {id: 12, title: '应用管理', 'menu_url': '/hippo/release'},
            {id: 13, title: '发布申请', 'menu_url': '/hippo/realease_apply'},
          ]
        },
        {id: 5, icon: 'mail', title: '定时计划', tube: '', 'menu_url': '/hippo/schedule', children: []},
        {
          id: 6, icon: 'mail', title: '配置管理', tube: '', 'menu_url': '/hippo/workbench', children: [
            {id: 14, title: '环境管理', 'menu_url': '/hippo/environment'},
            {id: 15, title: '服务配置', 'menu_url': '/hippo/workbench'},
            {id: 16, title: '应用配置', 'menu_url': '/hippo/workbench'},
          ]
        },
        {id: 7, icon: 'mail', title: '监控', tube: '', 'menu_url': '/hippo/workbench', children: []},
        {
          id: 8, icon: 'mail', title: '报警', tube: '', 'menu_url': '/hippo/workbench', children: [
            {id: 17, title: '报警历史', 'menu_url': '/hippo/workbench'},
            {id: 18, title: '报警联系人', 'menu_url': '/hippo/workbench'},
            {id: 19, title: '报警联系组', 'menu_url': '/hippo/workbench'},
          ]
        },
        {
          id: 9, icon: 'mail', title: '用户管理', tube: '', 'menu_url': '/hippo/workbench', children: [
            {id: 20, title: '账户管理', tube: '', 'menu_url': '/hippo/workbench'},
            {id: 21, title: '角色管理', tube: '', 'menu_url': '/hippo/workbench'},
            {id: 22, title: '系统设置', tube: '', 'menu_url': '/hippo/workbench'},
          ]
        },
      ]
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    selectedHandler(item, key, selectedKeys) {
      console.log('>>>>>', item, key, selectedKeys);
    }
  },
}
</script>

<style scoped>
#components-layout-demo-basic {
  text-align: center;
}

#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: #7dbcea;
  color: #fff;
}

#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-demo-basic .ant-layout-sider {
  background: #3ba0e9;
  color: #fff;
  line-height: 120px;
}

#components-layout-demo-basic .ant-layout-content {
  background: rgba(16, 142, 233, 1);
  color: #fff;
  min-height: 120px;
  line-height: 120px;
}

#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}

#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
</style>
